<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div id="app">
        <h2>{{title}}</h2>
        <aaa></aaa>
    </div>
</body>
<script src="../libs/vue3.js"></script>

<script>
    // 创建全局组件，使用Vue的哪个方法
    // Vue.component()

    const { createApp, ref, provide, inject } = Vue;

    // 子组件b
    const b = {
        template: `<div>
                        <p>{{title}}</p>
                        <p>provide注入的msg数据：{{msg}}</p>
                        <p>provide注入的str数据：{{str}}</p>
                        <p>provide注入的obj数据：{{obj.name}}</p>
                        <p>provide注入的obj数据：{{obj.age}}</p>
                    </div>`,
        setup(props){
            const title = ref("这是一个局部组件b");

            const msg = inject("msg");
            const setMsg = inject("setMsg");

            // 通过回调修改msg
            setMsg("hi");
            
            const str = inject("str", "hello vue3");
            const obj = inject("obj");
            
            return {title, msg, str, obj};
        }
    }

    // 子组件a
    const a = {
        template: `<div>
                        <p>{{title}}</p>
                        <bbb></bbb>
                    </div>`,
        setup(props, context){
            const title = ref("这是一个局部组件a");
            return {title};
        },
        components:{
            bbb: b
        },
    }

    // 根组件
    const app = createApp({
        setup() {
            const title = ref("这是根组件");

            
            const msg = ref("hello")
            // 向组件链中注入数据
            provide("msg", msg);
            // 将来可能对msg造成的修改
            provide("setMsg", (d)=>{
                msg.value = d;
            })
            provide("str", "world");
            provide("obj", {
                name:"张三",
                age:18
            })

            return { title };
        },
        components:{
            aaa: a
        }
    });
    

    app.mount("#app");

</script>
</html>